<script setup lang="ts">
import Tourist from '@/views/screen/bottom/Tourist.vue'
import Gender from '@/views/screen/bottom/Gender.vue'
import Age from '@/views/screen/bottom/Age.vue'
import Map from '@/views/screen/bottom/Map.vue'
import Trend from '@/views/screen/bottom/Trend.vue'
import Rank from '@/views/screen/bottom/Rank.vue'
import Year from '@/views/screen/bottom/Year.vue'
import Consumer from '@/views/screen/bottom/Consumer.vue'
</script>

<template>
  <div class="bottom">
    <div class="left side">
      <Tourist />
      <Gender />
      <Age />
    </div>
    <div class="center">
      <Map />
      <Trend />
    </div>
    <div class="right side">
      <Rank />
      <Year />
      <Consumer />
    </div>
  </div>
</template>

<style scoped lang="scss">
.bottom {
  display: flex;
  width: 100%;
  height: 1040px;

  .left,
  .right {
    flex: 1;
  }

  .center {
    display: flex;
    flex: 3;
    flex-direction: column;

    .map_data {
      flex: 4;
    }

    .trend_data {
      flex: 1;
    }
  }

  .side {
    display: flex;
    flex-direction: column;

    .data {
      //flex: 1;
      margin-top: 10px;
      background: url('@/assets/images/data_screen/dataScreen-main-lb.png')
        no-repeat;
      background-size: cover;
    }
  }
}
</style>
